<template>
  <div>
    <center align="center">
      <h1><span style="color: red">========#</span>司机申请审核界面<span style="color: red">#========</span></h1>
    </center>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="司机住址:">
              <span>{{ props.row.driverAddress }}</span>
            </el-form-item>
            <el-form-item label="司机性别:">
              <span>{{ props.row.driverGender }}</span>
            </el-form-item>
            <el-form-item label="身份证照片:">
              <img :src="props.row.driverIdpic" width="50px" height="50px">
            </el-form-item>
            <el-form-item label="司机简介:">
              <span>{{ props.row.driverIntro }}</span>
            </el-form-item>
            <el-form-item label="驾驶证照片:">
              <img :src="props.row.driverCarpic" width="50px" height="50px">
            </el-form-item>
            <el-button
              size="mini"
              type="danger"
              @click="queryDriverListByDriverId(props.row.driverId)"
            >查看详情
            </el-button>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="申请时间"
        prop="createTime"
      >
      </el-table-column>
      <el-table-column
        label="司机姓名"
        prop="driverName"
      >
      </el-table-column>
      <el-table-column label="司机照片" width="180">-->
        <template slot-scope="scope">
          <img :src="scope.row.driverPic" width="100px" height="100px">
        </template>
      </el-table-column>
      <el-table-column label="审核状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.checkState == 0">已提交申请</span>
          <span style="margin-left: 10px" v-if="scope.row.checkState == 1">已成为司机</span>
          <span style="margin-left: 10px" v-if="scope.row.checkState == 2">资质不全</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" prop="driverIdcard">
      </el-table-column>
    </el-table>
    <el-dialog title="司机详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名:" :label-width="formLabelWidth">
          <el-input v-model="form.driverName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="住址:" :label-width="formLabelWidth">
          <el-input v-model="form.driverAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码:" :label-width="formLabelWidth">
          <el-input v-model="form.driverIdcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别:" :label-width="formLabelWidth">
          <el-input v-model="form.driverGender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="司机简介:" :label-width="formLabelWidth">
          <el-input v-model="form.driverIntro" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证照片:" :label-width="formLabelWidth">
          <img :src="form.driverIdpic" width="50px" height="50px">
        </el-form-item>
        <el-form-item label="司机照片:" :label-width="formLabelWidth">
          <img :src="form.driverPic" width="100px" height="100px">
        </el-form-item>
        <el-form-item label="驾驶证照片:" :label-width="formLabelWidth">
          <img :src="form.driverCarpic" width="50px" height="50px">
        </el-form-item>
        <el-form-item label="城市地区:" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车辆:" :label-width="formLabelWidth">
          <el-input v-model="form.carId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="pass(form.driverId)">通过</el-button>
        <el-button type="primary" @click="reject(form.driverId)">驳回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  queryDriverByState,
  queryDriverListByDriverId,
  selectDriverById,
  updateDriverStateById
} from '@/api/driver/driver'

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      ReqCheck:{
        pageNum:1,
        pageSize:10,
      },
      tableData: [],
      form: {},
      formLabelWidth: '120px',
      dialogFormVisible: false,
      requestDriver: {
        checkState: '',
        driverId: ''
      }
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    //驳回申请
    reject(driverId) {
      this.requestDriver.driverId = driverId
      this.requestDriver.checkState = 4
      updateDriverStateById(this.requestDriver).then(res => {
        this.dialogFormVisible = false
        this.queryDriverByState()
        alert('已驳回申请')
      })
    },
    cancel() {
      this.dialogFormVisible = false
    },
    //通过   申请
    pass(driverId) {
      this.requestDriver.driverId = driverId
      this.requestDriver.checkState = 3
      updateDriverStateById(this.requestDriver).then(res => {
        this.dialogFormVisible = false
        this.queryDriverByState()
        alert('申请已通过')
      })
    },
    //根据状态查询
    queryDriverByState() {
      queryDriverByState(this.ReqCheck).then(res => {
        console.log(res)
        this.tableData = res.data.records
      })
    },
    //根据ID查询
    queryDriverListByDriverId(driverId) {
      this.dialogFormVisible = true
      queryDriverListByDriverId(driverId).then(res => {
        //console.log(res)
        this.form = res.data
      })
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.queryDriverByState()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

</style>
